<script setup lang="js">
import {computed, defineProps, onBeforeMount, ref} from 'vue';
import RankSummaryCard from "@/renderer/main-window/components/RankSummaryCard.vue";
import LcuSummonerName from "@/renderer/main-window/components/lcu/LcuSummonerName.vue";
import LcuProfile from "@/renderer/main-window/components/lcu/LcuProfile.vue";
import {displayRankTypeList} from "@/renderer/share/utils/constants.js";
import RankHistory from "@/renderer/main-window/components/rank/RankHistory.vue";
import { paseSkinIdToSkinInfo} from "@/renderer/main-window/utils/championUtils.js";
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";


onBeforeMount(() => {
  window.api.rank.getRankedListByPuuid(summonerInfo?.puuid).then(res => {
    totalRankInfo.value = res.data;
  });

  // paseSkinIdToSkinInfo(summonerProfileInfo?.backgroundSkinId)
  //     .then(res => {
  //       const uri = res?.uncenteredSplashPath;
  //       if (uri) {
  //        const url =`${ storeSystemCertificateInfo().getImgProxyPrefix()}${uri}`
  //         profileBackgroundStyle.value['background-image'] = `url("${url}")`;
  //         profileBackgroundStyle.value['background-position'] = 'center'
  //         profileBackgroundStyle.value['background-size'] = 'cover'
  //       }
  //     })
});


const {summonerInfo,summonerProfileInfo} = defineProps({
  "summonerInfo": {},
  "summonerProfileInfo": {},
})


const totalRankInfo = ref({});
const displayRankList = computed(() => {
  if (totalRankInfo.value === undefined || Object.keys(totalRankInfo.value).length === 0) {
    return [];
  }
  return displayRankTypeList.map((type) => {
    return totalRankInfo.value?.queueMap[type]
  });
})


const detailRankDriverSwitch = ref(false);
const openDetailRankDriverFunc = () => {
  detailRankDriverSwitch.value = true;
}


const profileBackgroundStyle = ref({

})

</script>
<template>
  <div style="display: flex;flex-direction: row;
  align-items: center;justify-content: flex-start;height: 100%">
    <div style="display: flex;flex-grow: 1;align-items: center;justify-content: center;height: 100%" :style="profileBackgroundStyle">
      <div style="margin-right: 36px">
        <!--        头像-->
        <LcuProfile
            :percentage="(summonerInfo.xpSinceLastLevel/summonerInfo.xpUntilNextLevel)*100||0"
            :summoner-level="summonerInfo.summonerLevel"
            shape="circle" :show-progress="true" :size="120" :profile-id="summonerInfo.profileIconId"/>

      </div>
      <div>
        <LcuSummonerName :name="summonerInfo.gameName" :num="summonerInfo.tagLine"/>
        <br>
        <el-text style="margin-left: 2rem"
                 size="small"
        >
          {{ summonerInfo.region }}
        </el-text>
      </div>

    </div>

    <el-divider
        style="height: 100%;margin-left: 36px"
        direction="vertical"/>

    <div style="width: 400px">
      <div style="text-align: right;margin-bottom: 3px">
        <el-button link @click="openDetailRankDriverFunc">
          段位详情->
        </el-button>
      </div>
      <div style="display: flex">
        <div v-for="item in displayRankList"
             style="margin: 0 0 0 36px;"
        >
          <RankSummaryCard
              :rankInfo="item"
          ></RankSummaryCard>
        </div>
      </div>
    </div>
  </div>
  <el-drawer
      :with-header="false"
      v-model="detailRankDriverSwitch">
    <RankHistory/>
  </el-drawer>

</template>

<style scoped lang="scss">
.username-copy {
  &:hover {
    cursor: pointer !important;
  }
}

.avatar-wrapper {
  :deep(.el-badge__content ) {
    //background-color: #7e8fd8 !important;
    color: red !important;
    border-radius: 0 !important;
    background: transparent;
  }
}
</style>